<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			body,html,div,p,span,ul,li{margin: 0;padding: 0;}
			li{list-style: none;}
			body{background: darkgrey;}
			#box{margin: 0 auto;background: #fff;width: 800px;}
			#box ul{
				display: -webkit-flex;
				flex-direction: row;
				
			}
			.item{
				display: -webkit-flex;
				flex-direction: column;
				align-items: center;
				border-bottom: 1px solid #EBEEF5;border-right: 1px solid #EBEEF5;
				flex: 1;
				padding: 15px 0;
			}
			.itemImg{width: 40px; height: 40px;background-image:url(img/nav.png);
			background-repeat: no-repeat;
			}
			.itemList1 .item:nth-child(1) .itemImg{
				background-position:0px -160px;
			}
			.itemList1 .item:nth-child(2) .itemImg{
				background-position:0px -200px;
			}
			.itemList1 .item:nth-child(3) .itemImg{
				background-position:0px -240px;
			}
			.itemList1 .item:nth-child(4) .itemImg{
				background-position:0px -280px;
			}
			
			.itemList2 .item:nth-child(1) .itemImg{
				background-position:0px -320px;
			}
			.itemList2 .item:nth-child(2) .itemImg{
				background-position:0px -360px;
			}
			.itemList2 .item:nth-child(3) .itemImg{
				background-position:0px -400px;
			}
			.itemList2 .item:nth-child(4) .itemImg{
				background-position:0px -440px;
			}
			
			.itemList3 .item:nth-child(1) .itemImg{
				background-position:0px 0px;
			}
			.itemList3 .item:nth-child(2) .itemImg{
				background-position:0px -40px;
			}
			.itemList3 .item:nth-child(3) .itemImg{
				background-position:0px -80px;
			}
			.itemList3 .item:nth-child(4) .itemImg{
				background-position:0px -120px;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<ul class="itemList1">
				<li class="item">
					<div class="itemImg"></div>
					<p>自由行</p>
				</li>
				<li class="item">
					<div class="itemImg"></div>
					<p>主题游</p>
				</li>
				<li class="item">
					<div class="itemImg"></div>
					<p>一日游</p>
				</li>
				<li class="item">
					<div class="itemImg"></div>
					<p>顶级游</p>
				</li>
			</ul>
			<ul class="itemList2">
				<li class="item">
					<div class="itemImg"></div>
					<p>酒店+景点</p>
				</li>
				<li class="item">
					<div class="itemImg"></div>
					<p>亲子·游学</p>
				</li>
				<li class="item">
					<div class="itemImg"></div>
					<p>外币兑换</p>
				</li>
				<li class="item">
					<div class="itemImg"></div>
					<p>加盟合作</p>
				</li>
			</ul>
			<ul  class="itemList3">
				<li class="item">
					<div class="itemImg"></div>
					<p>低价拼单</p>
				</li>
				<li class="item">
					<div class="itemImg"></div>
					<p>机场停车</p>
				</li>
				<li class="item">
					<div class="itemImg"></div>
					<p>旅行巴士</p>
				</li>
				<li class="item">
					<div class="itemImg"></div>
					<p>更多服务</p>
				</li>
			</ul>
		</div>
	</body>
</html>
